<style scoped>
</style>
<!--  -->
<template>
  <div class="article-base">
    <el-form-item label="文章标题" prop="title" class="width-limit" style="min-width:280px;max-width:930px;">
        <el-input v-model="article.title" size="medium" placeholder="输入不能超过200个字符" maxlength="200"></el-input>
      </el-form-item>
      <ItemCustomizeURL :system="system" :customizeUrl="article.customLink" :pageTitle="pageTitle" :pageid="article.id" ref="customLink"/>
      <el-form-item label="封面图片" v-if="system && system.systemType && system.systemType.id === 1">
        <el-button type="info" @click.stop="chooseImage">选择图片</el-button>
        <ArticleImageList :imageList="this.article.imageList" :resetImageList="resetImageList" />
      </el-form-item>

      <el-form-item label="文章分类" v-if="system && system.systemType && system.systemType.id === 1" class="width-limit" style="min-width:280px;max-width:930px;">
        <el-select v-model="article.categoryId" placeholder="请选择" size="medium" style="width:100%;">
          <el-option label="未分类" :value="-1">
          </el-option>
          <template v-for="item in categories[0]">
            <el-option :key="item.id" :label="item.name" :value="item.id"></el-option>
            <template v-for="ite in categories[item.id]">
              <el-option style="padding-left:36px;" :key="ite.id" :label="ite.name" :value="ite.id"></el-option>
              <template v-for="it in categories[ite.id]">
                <el-option style="padding-left: 54px;" :key="it.id" :label="it.name" :value="it.id"></el-option>
              </template>
            </template>
          </template>
        </el-select>
      </el-form-item>

      <el-form-item label="短标题" prop="slug" class="width-limit"
        v-if="system && system.systemType && system.systemType.id === 2" style="min-width:280px;max-width:930px;">
        <el-input v-model="article.slug" size="medium" placeholder="输入不能超过64个字符" maxlength="64"></el-input>
      </el-form-item>

      <el-form-item label="短标题级别" prop="slugParentId" class="width-limit"
        v-if="system && system.systemType && system.systemType.id === 2" style="min-width:280px;max-width:930px;">
        <el-select v-model="article.slugParentId" placeholder="请选择">
          <el-option label="顶级" :value="0">
          </el-option>
          <template v-for="item in sluges[0]">
            <el-option :key="item.id" :label="item.slug" :value="item.id" v-if="item.id !== article.slugId"></el-option>
            <template v-for="ite in sluges[item.id]">
              <el-option style="padding-left:36px;" :key="ite.id" :label="ite.slug" :value="ite.id"
                v-if="ite.id !== article.slugId"></el-option>
            </template>
          </template>
        </el-select>
      </el-form-item>

      <el-form-item label="排序序号" class="width-limit" style="min-width:280px;max-width:930px;">
        <el-input v-model="article.orderNum" type="number" size="medium" placeholder="输入数字" min="0"
            max="9223372036854775807" onkeyup="value=value.replace(/[^\d]/g,'')" class="changHgh"></el-input>
      </el-form-item>

      <el-form-item label="作者" class="width-limit" style="min-width:280px;max-width:930px;">
        <el-input v-model="article.author" size="medium" placeholder="输入文章作者" maxlength="64"></el-input>
      </el-form-item>

      <el-form-item label="来源" class="width-limit" style="min-width:280px;max-width:930px;">
        <el-input v-model="article.origin" size="medium" placeholder="输入文章来源" maxlength="128"></el-input>
      </el-form-item>

      <el-form-item label="浏览量" prop="viewCount" class="width-limit" style="min-width:280px;max-width:930px;">
        <el-input v-model="article.viewCount" type="number" size="medium" placeholder="输入文章浏览量" min="0"
          max="9223372036854775807" class="changHgh" onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
      </el-form-item>

      <el-form-item label="内容简介" class="width-limit" style="min-width:280px;max-width:930px;">
        <el-input v-model="article.synopsis" type="textarea" size="medium" placeholder="输入文章内容简介" maxlength="65535"
          :rows="3"></el-input>
      </el-form-item>

      <el-form-item label="发布时间" class="width-limit" style="min-width:280px;max-width:930px;">
        <el-date-picker v-model="article.releasedAt" v-datetime-format type="datetime" placeholder="请选择发布时间" size="medium"
          style="width:100%;">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="详细内容" style="width:calc(100% - 3px);">
        <Ue :defaultValue="article.content ? article.content: ''" :contentChange="contentChange" :id="'content'" ref="content"></Ue>
      </el-form-item>
      <!-- 选择图片 -->
      <ChooseRepertory ref="chooseImage" />
  </div>
</template>

<script>
import Ue from '@/components/common/ueditor/Ue.vue'
import ChooseRepertory from '@/components/common/repertory/ChooseRepertory.vue'
import ArticleImageList from '@/components/main/user/system/article/common/ArticleImageList.vue'
import ItemCustomizeURL from '@/components/main/user/system/common/ItemCustomizeURL.vue'
import * as functions from '@/core/functions.js'
export default {
  props: {
    categories: {
      type: Object
    },
    system: {
      type: Object
    },
    article: {
      type: Object
    },
    resetImageList: {
      type: Function
    },
    contentChange: {
      type: Function
    },
    isSetUecontent: {
      type: Boolean
    }
  },
  created () {
    if (this.isSetUecontent) {
      this.setContent()
    }
  },
  data () {
    return {
    }
  },
  computed: {
    pageTitle () {
      return this.article.title
    }
  },
  watch: {
    isSetUecontent: {
      handler (newVal) {
        if (newVal) {
          this.setContent()
        }
      }
    }
  },
  methods: {
    // 点击选择图片
    chooseImage () {
      if (this.article.imageList.length > 0) {
        this.$message.error('只允许选择一张图片')
        return
      }
      this.$refs['chooseImage'].show({ title: '选择文章封面图片', where: { type: [0, 4] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          this.article.imageList = repertoryList.map(item => {
            let repertoryImageSrc = { hostId: this.$store.state.host.id, repertoryId: item.id, suffix: item.suffix, type: item.type, link: item.link }
            return {
              id: item.id,
              src: functions.getRepertoryImageSrc(repertoryImageSrc),
              title: item.originalFilename,
              alt: item.originalFilename
            }
          })
        }
      })
    },
    getContent () {
      return this.$refs['content'].getUEContent()
    },
    setContent () {
      this.$nextTick(() => {
        this.$refs['content'].setUEContent(this.article.content ? this.article.content : '')
      })
    },
    getCustomLink () {
      let itemCustomLinkInfo = this.$refs['customLink'].customUrl()
      return itemCustomLinkInfo
    }
  },
  components: {
    Ue,
    ArticleImageList,
    ChooseRepertory,
    ItemCustomizeURL
  }
}

</script>
<style scoped lang="scss">
.el-form-item {
  margin-bottom: 15px;
}
.width-limit {
  min-width: 180px;
  max-width: 640px;
}
</style>
